<!-- 入口组件 -->
<template>
	<div class="common">
		<h1>hello vue!</h1>
		<p>
			<!-- 使用 router-link 组件来导航. -->
			<!-- 通过传入 `to` 属性指定链接. -->
			<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
			<router-link :to="{ name: 'foo' }">Go to Foo</router-link>
			| 
			<router-link :to="{ name: 'bar' }">Go to Bar</router-link>
			|
			<router-link :to="{ path: '/about' }">About</router-link>
		</p>
		<ul>
			<li
				v-for='(item, index) of ["23", "12", "34", "asdc"]'
				:key="index"
			>
				<span @click="linkTo({ 
					name: 'user',
					params: { 
						id: item,
						index: index 
					},
					query: {
						id: '123',
						form: 'index'
					}
				})">{{ item }}</span>
				<!-- <router-link :to="`/user/${item}/article/${index}`">To User {{ item }}</router-link> -->
				<!-- <router-link :to="{ 
					name: 'user',
					params: { 
						id: item,
						index: index 
					},
					query: {
						id: '123',
						form: 'index'
					}
				}">To User {{ item }}</router-link>-->
			</li>
		</ul>
		<!-- 路由出口 -->
		<!-- 路由匹配到的组件将渲染在这里 -->
		<hr>
		<router-view></router-view>
	</div>
</template>

<script>
export default {
	created() {
		console.log(this)
	},
	methods: {
		linkTo(opt) {
			console.log(opt)
			// 编程式导航跳转页面
			// this.$router.push({ path: opt })
			this.$router.push(opt)
			// 不产生历史记录
			// this.$router.replace(opt)
		}
	}
}
</script>

<style>
</style>
